<template>
    <div class="page">
        <nav-top style="position:sticky; top: 0; left: 0;right: 0;"></nav-top>
        <div class="ball1 bg"></div>
        <div class="ball2 bg"></div>
        <div class="ball3 bg"></div>
        <div class="ball4 bg"></div>
        <div class="ball5 bg"></div>
        <div class="ball6 bg"></div>
        <div class="ball7 bg"></div>
        <div class="bg1 bg"></div>
        <div class="bg2 bg"></div>
        <div class="bg3 bg"></div>
        <div class="bg4 bg"></div>
        <div class="bg5 bg"></div>
        <div class="bg6 bg"></div>

        <div class="main">
            <div class="list" v-if="list.length > 0">
                <div class="top">
                    <span class="type">全部</span>
                    <select-input :typeList="typeList" width="1.95rem" :placeholder="new Date().getFullYear()"
                        color="#7709CC"></select-input>
                </div>
                <ul class="item-list">
                    <li v-for="item in list" :key="item" class="mouse-active">
                        <div class="image">
                            <el-image v-if="item.image" :src="item.image"></el-image>
                        </div>
                        <div class="center">
                            <div class="center-top">
                                <div class="title" :title="item.title">{{ item.title }}</div>
                                <div class="date">{{ date(item.date) }}</div>
                            </div>
                            <div class="author">{{ item.author }}</div>
                        </div>
                        <div class="content">
                            <p :title="item.content">{{ item.content }}</p>
                        </div>
                    </li>
                </ul>
                <my-pagination :pageSize="pageSize" :total="total"></my-pagination>
            </div>
            <my-empty v-else></my-empty>
        </div>
    </div>
</template>

<script>
import navTop from "@/components/common/nav-top"
import myEmpty from "@/components/common/empty"
import selectInput from "@/components/common/select-input";
import myPagination from "@/components/common/my-pagination"
export default {
    name: "relatedInformation",
    components: {
        navTop,
        myEmpty,
        selectInput,
        myPagination
    },
    data() {
        return {
            // list: [
            //     {
            //         image: 'https://originstar.oss-cn-shanghai.aliyuncs.com/contest/posters/1.jpg',
            //         title: "DNA存储又一重大突破！天津大学合成生物学团队将十辐敦煌壁画存储于DNA",
            //         date: new Date(),
            //         author: "生辉SynBio",
            //         content: "近日，天津大学合成生物学团队又创新 DNA 存储算法，将上述十幅敦煌壁画存入 DNA 中，通过加速老化实验验证壁画信息在实验室常温下可保存千年，在9.4°C下可保存两万年。"
            //     }
            // ],
            list: [],
            pageSize: 5,
            total: 1,
            typeList: []
        }
    },

    computed: {
        date: function () {
            return function (v) {
                let num = '';
                if (v) {
                    let d = new Date(v)
                    let y = d.getFullYear();
                    let m = (d.getMonth() + 1) >= 10 ? (d.getMonth() + 1) : ('0' + (d.getMonth() + 1))
                    let day = d.getDate() >= 10 ? d.getDate() : '0' + d.getDate()
                    num = y + '/' + m + '/' + day
                }

                return num
            }
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    width: 51.2rem;
    min-height: 100vh;
    position: relative;

    .bg {
        pointer-events: none;
        z-index: -1;
    }

    .ball1 {
        width: 0.69rem;
        height: 0.69rem;
        background: url('@/assets/img/balls2_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 6.03rem;
        top: 9.04rem;
    }

    .ball2 {
        width: 0.45rem;
        height: 0.45rem;
        background: url('@/assets/img/balls1_3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 4.16rem;
        top: 14.93rem;
    }

    .ball3 {
        width: 1.39rem;
        height: 1.39rem;
        background: url('@/assets/img/balls1_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.91rem;
        top: 3.28rem;
    }

    .ball4 {
        width: 0.83rem;
        height: 0.83rem;
        background: url('@/assets/img/balls1_2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.13rem;
        top: 5.52rem;
    }

    .ball5 {
        width: 2.08rem;
        height: 2.11rem;
        background: url('@/assets/img/balls3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 3.07rem;
        bottom: 8rem;
    }

    .ball6 {
        width: 1.25rem;
        height: 1.28rem;
        background: url('@/assets/img/balls5.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 5.68rem;
        bottom: 6.19rem;
    }

    .ball7 {
        width: 0.93rem;
        height: 0.96rem;
        background: url('@/assets/img/balls4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.13rem;
        bottom: 4.11rem;
    }

    .bg1 {
        width: 6.13rem;
        height: 5.23rem;
        background: url('@/assets/img/relatedInformation/bg1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0;
        top: 0;
    }

    .bg2 {
        width: 11.25rem;
        height: 7.97rem;
        background: url('@/assets/img/relatedInformation/bg2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .bg3 {
        width: 10.35rem;
        height: 10.35rem;
        background: url('@/assets/img/relatedInformation/bg3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 14.8rem;
        bottom: 2.03rem;
    }

    .bg4 {
        width: 12.13rem;
        height: 6.24rem;
        background: url('@/assets/img/relatedInformation/bg4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.37rem;
        bottom: 0;
    }

    .bg5 {
        width: 9.04rem;
        height: 10.43rem;
        background: url('@/assets/img/relatedInformation/bg5.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0.51rem;
        top: 8.43rem;
    }

    .bg6 {
        width: 5.76rem;
        height: 6.4rem;
        background: url('@/assets/img/relatedInformation/bg6.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }
}

.main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .list {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;

        .top {
            width: 34.99rem;
            padding: 0.85rem 0;
            padding-left: 1.49rem;

            .type {
                font-size: 0.53rem;
                font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
                font-weight: normal;
                color: #212121;
                line-height: 0.85rem;
            }
        }

        .item-list {
            display: flex;
            align-items: center;
            flex-direction: column;
            margin-bottom: 0.85rem;

            li {
                width: 34.99rem;
                height: 7.12rem;
                background: rgba(253, 253, 254, 0.25);
                border: 0.05rem solid #FFFFFF;
                backdrop-filter: blur(10px);
                display: flex;
                align-items: flex-start;

                .image {
                    width: 9.68rem;
                    height: 5.38rem;
                    margin: 0.85rem 1.47rem 0 1.49rem;

                    .el-image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .center {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    width: 9.68rem;
                    height: 5.51rem;
                    margin-top: 0.85rem;
                    margin-right: 1.49rem;

                    .center-top {
                        .title {
                            font-size: 0.53rem;
                            font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
                            font-weight: normal;
                            color: #212121;
                            line-height: 0.85rem;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3;
                            overflow: hidden;
                        }

                        .date {
                            font-size: 0.53rem;
                            font-family: 'Helvetica-Light', 'Helvetica';
                            font-weight: 300;
                            color: #C5C5CA;
                            line-height: 0.85rem;
                            margin-top: 0.16rem;
                        }
                    }

                    .author {
                        font-size: 0.53rem;
                        font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
                        font-weight: normal;
                        color: #68656C;
                        line-height: 0.85rem;
                    }
                }

                .content {
                    width: 9.68rem;
                    max-height: 5.12rem;
                    margin-top: 0.85rem;

                    p {
                        font-size: 0.53rem;
                        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                        font-weight: normal;
                        color: #68656C;
                        line-height: 0.85rem;
                        letter-spacing: 2px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 6;
                        overflow: hidden;
                    }
                }
            }
        }

    }
}
</style>